<!-- 声纹登录 -->
<script setup>
import { nextTick, ref } from 'vue';

// isRecording  记录当前录音的状态 
const isRecording = ref(false);
// 存储声音 
const audioChunks = ref([]);
let  mediaRecorder;
// 音频地址 
let audioBlobUrl = ref('');
// 文字存储当前的状态 
let content = ref('点击开始录音');
// 下载文件的名字
let fileName = ref('')

// 开始录音
const startRecording = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' })
 
  mediaRecorder.ondataavailable = event => {
    if (event.data && event.data.size > 0) {
      audioChunks.value.push(event.data);
    }
  };

  mediaRecorder.start();
  isRecording.value = true;

  content.value = "读完请再次点击，结束录音"
};
 
// 停止录音
const stopRecording = () => {
 mediaRecorder.onstop = () => {
  const blob = new Blob(audioChunks.value, { type: 'audio/webm' });
  audioBlobUrl.value = URL.createObjectURL(blob);
  fileName.value= `recording-${new Date().toISOString().replace(/:|\./g,'-')}.mp3`;
  audioChunks.value = [];
  nextTick(()=>{
      document.querySelector('#download').click()

      content.value = "点击开始录音"
  })


};


  mediaRecorder.stop();
  isRecording.value = false;


};



// 开始 结束录音 
const  startOrstop = () => {
  if(isRecording.value) {
    stopRecording()
  } else {
    startRecording()
  }

}
// 导入切换人脸识别的状态组件 

import {useLoginStore, useCounterStore}  from '@/views/admin/store/login.js'
// import {useLoginStore}  from '@/store/modules/login.js'

const store =  useLoginStore()


</script>


<template>


  <div class="right-infp">

    <div>
      <el-tooltip
      class="box-item"
      effect="dark"
      :content="content"
      placement="bottom"
    >
    <div  class="startRecorded" @click="startOrstop">{{!isRecording ?  "开始录音":"录音中"}}</div>
    </el-tooltip>


    

    <a :href="audioBlobUrl"  v-show="false" id="download" :download="fileName">下载-{{fileName}}</a>
  </div>

    



    <div class="right-infp-btn">
      <a @click="store.setformState"> 返回账号登录 </a>
      <a class="ml10"  @click="store.setfaceState"> 返回人脸登录 </a>
    </div>
  </div>



  </template>
   

<style  lang="scss"  scoped>
// 公共类名
$common: 100px;
.startRecorded {
    width: $common;
    height: $common;
    background-color: #398def;
    text-align: center;
    line-height: $common;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
}
</style>




<style scoped >
.right-infp {
  width: 21.5rem;
  height: 18.5rem;
  margin: auto auto;
  padding-top: 40px;
  /* border: 1px solid red;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 7.2rem;
  left: 4rem;
}
.right-infp-name {
  width: 100%;
  height: 13.5rem;
  background-size: 100% 100%;
  line-height: 1.9rem;
  margin-bottom: 1.8rem;
  position: relative;
}

.kuai {
  width: 100%;
  height: 13.5rem;
}

.kuai video {
  width: 100%;
  height: 13.5rem;
}
.kuai span {
  width: 3.5rem;
  height: 2rem;
}

.right-infp-btn {
  width: 100%;
  height: 7.5rem;
  position: relative;
  margin-top: 35px;
}
.right-infp-btn a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: 0.5s;
  border: 2px solid #79bbff;
  background: #79bbff;
  letter-spacing: 4px;
}

.right-infp-btn a:hover {
  background: #00eaff;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #00eaff, 0 0 25px #00eaff, 0 0 50px #00eaff,
    0 0 100px #00eaff;
}

.ml10 {
    margin-left: 10px;
}
</style>
